<script setup>
    import {
        onBeforeMount,
        reactive,
        ref
    } from "vue";
    import {
        ElNotification,
        ElMessageBox,
        ElMessage
    } from "element-plus";
    import path from "../utils/api"
    import request from "../utils/request";
    
    const img_url = path.IMG_URL;
    
	const seleValue = ref([]); 
    const seaValue = ref(""); //搜索框的内容
    const seaOld = ref("");
    const isClick = ref(true); //防抖
	const options = [
	    {value: "2",label: "会员用户"},
	    {value: "1",label: "普通用户"},
	];
    
    let total = ref(0); //分页总条数
    let currentPage = ref(1); //当前分页
    let pageSize = ref(10); //每页显示的数量
    //let pageTotal = ref(5); //总页数
    let loading = ref(false);
    
    let tableData = ref([]);
    
    //渲染之前获取数据
    onBeforeMount(() => {
        getOrderDataList(seleValue.value,currentPage.value, pageSize.value,"");
    })
    //获取数据
    const getOrderDataList = (seleList,currentPage, pageSize,keyword) => {
        if(isClick.value){
            isClick.value = false;
            loading.value = true;
			let sele_arr = [];
			sele_arr = seleList.length == 0 ? [1,2] : seleList;
            //获取数据
            request.ajax({
                    needToken: true,
                    url: "/car_wash_api/v1/admin/home/get_user_list",
                    data: {
                        page_num: currentPage,
                        page_size: pageSize,
						type_list : sele_arr,
						keyword : keyword
                    },
                },
                (result) => {
                    const {code,data,message} = result;
                    setTimeout(() => {
                        isClick.value = true;
                        loading.value = false;
                    }, 500);
                    if(code === 10000){
                        tableData.value = data.data;
                        total.value = data.total;
                    }else{
                        ElMessage({
                            message: '获取数据接口异常',
                            type: "warning",
                            duration: 2000,
                        });
                    }
                },
                (fail) => {
                    isClick.value = true;
                    loading.value = false;
                }
            );
        }
    }
	const seleChange = (e) => {
	    seleValue.value = e;
	    currentPage.value = 1;
	    getOrderDataList(e, currentPage.value, pageSize.value,seaValue.value);
	};
    //搜索提交
    const handleEnter = ()=>{
        if(isClick.value){
            if(seaValue.value === ""){
                ElMessage({
                    message: '请输入搜索内容',
                    type: "warning",
                    duration: 2000,
                });
                return false;
            }else{
                if(seaOld.value === seaValue.value){ //防止同一个字段 重复搜索
                    return false;
                }else{
					currentPage.value = 1;
					getOrderDataList(seleValue.value, currentPage.value, pageSize.value,seaValue.value);
                }
                seaOld.value = seaValue.value;
            }
        }
    }
	const reset = ()=>{
		currentPage.value = 1;
		seaValue.value = "";
		seleValue.value = [];
		getOrderDataList(seleValue.value, currentPage.value, pageSize.value,seaValue.value);
	}
    //监听分页改变
    const pageChange = (e) => {
        currentPage.value = e;
        getOrderDataList(seleValue.value,currentPage.value, pageSize.value,seaValue.value);
    };
    //处理时间
    const getTimes = (time) => {
        return time.split(".")[0].replace("T", " ");
    };
</script>

<template>
    <div class="member"  v-loading="loading">
        <!-- 筛选和搜索 -->
        <div class="or_top">
            <!-- 筛选 -->
            <div class="shai">
                <el-select v-model="seleValue" multiple clearable @change="seleChange" placeholder="默认展示全部"
                    style="width: 345px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="search">
                <el-input v-model.trim="seaValue" class="inputs" placeholder="姓名/用户手机号" prefix-icon="Search"
                    @keyup.enter="handleEnter" />
                <el-button class="seaBtns" type="primary" @click="handleEnter">搜索</el-button>
            </div>
            <el-button class="reset" type="success" @click="reset">重置</el-button>
        </div>
        
        <!-- 列表 -->
        <div class="results">
            
            <div class="list" v-if="tableData.length">
                <el-table :data="tableData" style="width: 100%" stripe row-key="id"
                    :scrollbar-always-on="true"
                    :header-cell-style="{ textAlign: 'center',fontWeight:'bold' }"
                    :cell-style="{ textAlign: 'center'}"
                >
                    <el-table-column prop="id" label="id" width="70" />
					<el-table-column label="姓名" width="70" >
					    <template #default="scope">
					        <div class="inlineFlex" v-if="scope.row.full_name">
					            {{ scope.row.full_name }}
					        </div>
							<div v-else>未填写</div>
					    </template>
					</el-table-column>
					
                    <el-table-column label="头像" width="170" >
                        <template #default="scope">
                            <div class="inlineFlex" v-if="scope.row.avatar_url">
                                <img class="headImg" :src="img_url+scope.row.avatar_url" alt="">
                            </div>
							<div v-else>未设置</div>
                        </template>
                    </el-table-column>
					<el-table-column prop="user_money" label="余额" width="100" />
					<el-table-column label="注册时间" width="170" >
						<template v-slot="scope">
							<div class="inlineFlex" v-if="scope.row.create_time">
							    {{ getTimes(scope.row.create_time) }}
							</div>
							<div v-else>显示异常</div>
						</template>
					</el-table-column>
					
					<el-table-column label="会员" width="90" >
					    <template #default="scope">
					        <div class="inlineFlex" v-if="scope.row.level == 2">
					            会员用户
					        </div>
							<div v-else>普通用户</div>
					    </template>
					</el-table-column>
					<el-table-column label="会员到期时间" width="170" >
					    <template v-slot="scope">
							<div class="inlineFlex" v-if="scope.row.vip_expire_time">
							    {{ getTimes(scope.row.vip_expire_time) }}
							</div>
							<div v-else>未开通会员</div>
					    </template>
					</el-table-column>
					
                    <el-table-column prop="mobile_phone" label="电话" width="130" />
					<el-table-column label="车牌" width="120" >
					    <template #default="scope">
					        <div class="inlineFlex" v-if="scope.row.plate_number">
					            {{ scope.row.plate_number }}
					        </div>
							<div v-else>未填写</div>
					    </template>
					</el-table-column>
					<el-table-column label="地址" width="280" >
					    <template #default="scope">
					        <div class="inlineFlex" v-if="scope.row.address">
					            {{ scope.row.address }}
					        </div>
							<div v-else>未填写</div>
					    </template>
					</el-table-column>
            
                </el-table>
            
                <div class="fenye">
                    <el-pagination background  layout="total,prev, pager, next" v-model:current-page="currentPage"
                        :page-size="pageSize" :total="total" @change="pageChange" >
						<template #total="scope">
						  总共有 <strong>{{ scope.total }}</strong> 条记录
						</template>
					</el-pagination>
                </div>
            </div>
            
            <el-empty class="error" description="暂无数据" v-else>
                <!-- <el-button type="primary" @click="go_order">回到全部订单</el-button> -->
            </el-empty>
           
            
        </div>
        
    </div>

</template>

<style lang="scss">
    /*  公共颜色 */
    $main: #409eff;

    .member {
        font-size: 15px;width: 100%;
        min-width: 860px;margin: 0 auto;
        .or_top {
            display: flex;align-items: center;
            /* 搜索 */
            .search{
                display: flex;align-items: center;margin-left: 15px;
                .inputs{
                    width: 240px;margin-right: 5px;font-size: 14px;
                    &:focus{border: 1px solid $main;}
                }
                .seaBtns{background-color: $main;border: none;}
            }
			.reset{
				margin-left: 5px;
			}
        }
        //列表
        .results{
            height: calc(100vh - 105px);
            position: relative;
            
            .list {
                padding: 10px 0 0 0;
				.inlineFlex{
					display: inline-flex;align-items: center;text-align: center;
				}
                .headImg{
                    display: inline-block;margin: 0 auto;
                    width:70px;height:70px;border-radius: 50%;
                }
                .fenye {
                    text-align: center;
                    width: 100%;
            
                    .el-pagination {
                        margin: 20px auto;
                        display: inline-flex;
                    }
                }
            }
            
            .error {
                position: absolute;
                left: 50%;
                top: 40%;
                transform: translate(-50%, -50%);
            }
        } 
    }
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        border: 1px solid $main;
        background-color: #fff;
    }
</style>